<template>
  <PageListContainer class="notice-list">
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="">
          <el-input v-model="state.params.title" clearable placeholder="请输入课程标题/课程链接" style="width: 230px" :suffix-icon="Search" />
        </el-form-item>
        <el-form-item label="课程类型">
          <el-select v-model="state.params.classify" placeholder="请选择课程类型">
            <el-option v-for="(o, i) in classifyOptions" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="成长阶段">
          <el-select v-model="state.params.stage" placeholder="请选择成长阶段">
            <el-option v-for="(o, i) in stageOptions" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程状态">
          <el-select v-model="state.params.status" placeholder="请选择课程状态">
            <el-option v-for="(o, i) in statusOptions" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-toolbar>
        <el-button type="primary" @click="onClickAdd">新建课程</el-button>
      </k-toolbar>
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #course_url="{ row }">
          <el-link type="primary" @click="handleJumpUrl(row.course_url)">
            <EllipsisText :content="row.course_url" :width="210" show-tooltip> {{ row.course_url }} </EllipsisText>
          </el-link>
        </template>
        <template #actions="s">
          <el-link type="primary" @click="onClickShelf(s.row)">{{ shelfStatusMap[s.row.status] }}</el-link>
          <el-link type="primary" :disabled="s.row.status > 0" @click="onClickEdit(s.row)">编辑</el-link>
          <el-link type="danger" :disabled="s.row.status > 0" @click="onClickDel(s.row)">删除</el-link>
        </template>
      </k-table>
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { classifyOptions, statusOptions, stageOptions, useTableList } from './hooks/use-table';
import { baseConfirm, useDel } from '@crud/index';
import { Search } from '@element-plus/icons-vue';
import EllipsisText from '@/components/base-ellipsis-text/index.vue';
import { ElMessage } from 'element-plus';

import { shelfCourse, del as delCourse } from '@/api/crm-dyj/course';

defineOptions({ name: 'DyjCourseList' });
const router = useRouter();
const { state, tableState, tableEvent, ...methods } = useTableList();

const { onClickDel } = useDel({
  confirm: { title: '删除', message: '确定删除该课程？' },
  del: async (data: any) => {
    const res = await delCourse({ id: data.id });
    if (!res.err) {
      ElMessage.success('删除成功');
      afterSubmit();
    }
  }
});

// 新增编辑
const onClickAdd = () => {
  router.push({ name: 'DyjCourseAdd', query: { type: 'create', id: 0 } });
};
const onClickEdit = (row: any) => {
  router.push({ name: 'DyjCourseAdd', query: { type: 'edit', id: row.id } });
};
const shelfStatusMap = {
  1: '下架',
  0: '上架'
};
/** 上下架课程 */
const onClickShelf = async (row: any) => {
  const { status, id } = row;
  const shelfText = shelfStatusMap[status];
  await baseConfirm({ title: shelfText, message: `确定${shelfText}该课程？` });
  const params = {
    // itemId: id,
    id,
    status: status === 1 ? 0 : 1
  };
  const res = await shelfCourse(params);
  if (!res.err) {
    ElMessage.success(`${shelfText}成功`);
    afterSubmit();
  }
};
const handleJumpUrl = (url: string) => {
  window.open(url, '_blank');
};
const afterSubmit = () => {
  methods.getList();
};
</script>
